<template>
  <view class="container">
    <view class="fater">
      <view class="tu" style="background: url('/static/images/01.jpg')">
        <!-- <view class="zj">
          <u-icon name="arrow-left" ></u-icon>
        </view> -->
        <view class="fx">
          <u-icon name="share-square" size="26" color="#55bd78"></u-icon>
        </view>
      </view>
      <view class="hz">
        <view class="zt"
          ><view class="life">
            用生命密码，召唤专属你的幸运魔法|特别线下活动
          </view></view
        >
        <view class="xb">
          <view class="woman">女士：免费</view>
          <view class="man">男士：免费</view>
        </view>
        <view class="hb">
          <view class="hd">
            <view class="huodongshijian">
              <view class="icon">
                <u-icon name="photo"></u-icon>
              </view>

              <view class="huodongwenzi"
                ><view>活动时间</view>

                <view style="font-size: 12px; margin: 5px -13px"
                  >2024-11-27 14:30</view
                >
              </view>
            </view>
            <view class="lx"
              ><view class="ic"><u-icon name="photo"></u-icon> </view>
              <view class="lianxi"
                ><view>联系电话</view>
                <view style="font-size: 12px; margin: 5px -13px"
                  >15018180888</view
                ></view
              >
            </view>
          </view>
          <view class="center">
            <view class="su"> </view>
          </view>

          <view class="dz"
            ><view class="on"><u-icon name="photo"></u-icon> </view>
            <view class="dizhi"
              ><view>活动地址</view>
              <view style="font-size: 12px; margin: 5px -13px; width: 150px"
                >吉大山海一品1栋2单元1002室</view
              ></view
            ></view
          >
        </view>
      </view>
    </view>
    <view class="baominghe">
      <view class="top">
        <view class="bm">已报名</view>
        <view class="nan">男 <span style="color: blue">4</span> 人</view>
        <view class="nv">女 <span style="color: blue">5</span> 人</view>
      </view>
      <view class="bottom">
        <view class="Row">
          <view class="left">
            <view class="avatar">
              <u-image
                :showLoading="true"
                :src="'https://cdn.uviewui.com/uview/album/1.jpg'"
                width="50px"
                height="50px"
                :shape="'circle'"
                @click="click"
              ></u-image>
            </view>
          </view>
          <view class="right">
            <view class="avatar">
              <u-image
                :showLoading="true"
                :src="'https://cdn.uviewui.com/uview/album/1.jpg'"
                width="50px"
                height="50px"
                :shape="'circle'"
                @click="click"
              ></u-image>
            </view>
            <view class="avatar">
              <u-image
                :showLoading="true"
                :src="'https://cdn.uviewui.com/uview/album/1.jpg'"
                width="50px"
                height="50px"
                @click="click"
                :shape="'circle'"
              ></u-image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="dayi">
      <view style="display: flex; align-content: center">
        <view class="kefu"> <u-icon name="photo" /></view>
        <view class="huodongdayi">活动答疑，了解活动进展</view>
      </view>
      <view class="lianxiwm">联系我们</view></view
    >
    <view class="xaingqing"
      ><u-tabs
        :list="list1"
        :inactiveStyle="{ fontSize: '16px' }"
        lineColor="purple"
        lineWidth="20px"
        :activeStyle="{
          fontSize: '20px',
          fontWeight: 'bold',
          color: 'purple',
        }"
        @click="click"
      ></u-tabs>
      <view class="shiping">
        <video
          id="myVideo"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
          @error="videoErrorCallback"
          enable-danmu
          danmu-btn
          controls
        ></video>
      </view>
    </view>
    <view class="bottom1">
      <view class="left">
        <view class="syh">
          <view class="page"
            ><u-icon name="home-fill" color="#55bd78" size="28"></u-icon
          ></view>
          <view class="shouye" style="font-size: 12px">首页</view>
        </view>
        <view class="fxh">
          <view class="share"
            ><u-icon name="pushpin-fill" size="28" color="#55bd78"></u-icon
          ></view>
          <view class="fenxiang" style="font-size: 12px">分享</view>
        </view>
      </view>
      <view class="bmh" @click="baoming">报名</view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    this.ProductData()
  },
  data() {
    return {
      list: [],
      page:1,
      list1: [
        {
          name: "活动详情",
        },
        {
          name: "活动流程",
        },
      ],
      code: "",
      product: null,
      keyword:"",
      business: {},
      show: false,
      content: "是否更换防伪码",
    };
  },
  methods: {
    baoming()
    {
        this.$u.route({
            url:"pages/card/add"
        })
    },
    async ProductData() { //数据请求
      var params = {
        busid:0,
        page: this.page,
        keyword: this.keyword,
      };

      //请求中
      var result = await uni.$u.http.post("/product/signupData", params);


      if (result.code == 0) {
        return false;
      }

      this.list = this.list(result.data);
    },
  },
};
</script>
<style  lang="scss" scoped>
page {
  background: #f3f4f6;
}
#myVideo {
  border-radius: 10px; /* 设置所有四个角的圆角半径 */
  overflow: hidden; /* 确保视频内容不会溢出圆角边界 */
}

.container {
  padding: 0px;
  .bottom1 {
    background: #ffffff;
    height: 50px;
    position: fixed;
    z-index: 999999;
    display: flex;
    justify-content: space-around;
    bottom: 0px;
    left: 0px;
    width: 100%;
    .left {
      width: 20%;
      display: flex;
      justify-content: space-between;
    }
    .bmh {
      margin-top: 3px;

      height: 30px;
      border-radius: 30px;
      display: flex;
      padding-top: 8px;
      background: #55bd78;
      font-size: 16px;
      justify-content: center;
      width: 65%;
    }
  }
  .xaingqing {
    .shiping {
      width: auto;
      height: auto;
      // background: #c8c9cc;
      border-radius: 20px;

      display: flex;
      background: #ffffff;
      justify-content: center;
      margin-top: 40px;
    }
    background: #ffffff;
    margin-top: 10px;
    width: 100%;
    height: 400px;
  }
  .dayi {
    width: 100%;
    height: 30px;
    background: #ffffff;
    padding-top: 15px;
    margin-top: 10px;
    justify-content: space-between;

    display: flex;
    font-size: 13px;

    .kefu {
      margin-top: 3px;
      margin-left: 10px;
    }
    .huodongdayi {
    }
    .lianxiwm {
      width: 65px;
      height: 20px;
      text-align: center;
      background: #0000ff;
      color: #ffffff;
      line-height: 20px;
      border-radius: 15px;
      margin-right: 10px;
      font-size: 10px;
    }
  }
  .baominghe {
    .bottom {
      .Row {
        display: flex;
        justify-content: space-between;
        margin: 10px auto;
        .left {
          display: flex;
          .avatar {
            margin-left: 10px;
          }
        }
        .right {
          margin-right: 10px;
          display: flex;
          .avatar {
            margin-right: 10px;
          }
        }
      }
    }
    width: 100%;
    height: 100px;
    margin-top: 240px;
    padding: 10px;
    background: #ffffff;
    .top {
      display: flex;
      padding-left: 10px;

      .bm {
      }
      .nan {
        margin: 0px 20px;
      }
      .nv {
        margin: 0px 20px;
      }
    }
  }
  .fater {
    position: relative;
  }
}
.center {
  height: 140px;
  width: 50px;

  .su {
    height: 80px;
    margin: 30px 50px;
    width: 2px;
    background: #ffffff;
  }
}
.tu {
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: right;
  .zj {
    padding-left: 10px;
  }
  .fx {
    margin-top: 10px;
    padding-right: 10px;
  }
}
.hz {
  // color: #d3d3d3;
  border-top-left-radius: 20px;
  position: absolute;
  left: 0;
  // border: 1px solid #000;
  top: 155px;
  padding-top: 15px;
  padding-left: 5px;
  background: #ffffff;
  border-top-right-radius: 20px;

  width: 100%;
  height: 265px;
  .hb {
    width: 95%;
    height: 140px;
    background: #c8c9cc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 15px 5px;
    .hd {
      padding-left: 20px;
      .huodongshijian {
        margin: 15px -10px;
        display: flex;
        .huodongwenzi {
        }
      }
    }
    .lx {
      padding-left: 10px;
      margin-top: 20px;
      align-content: center;
      margin-left: -20px;
      display: flex;
    }
    .dz {
      margin: 15px 0px;
      display: flex;
    }
  }
  .zt {
    width: 97%;
    margin: 0 auto;

    .life {
      font-weight: bold;
      font-size: 20px;
    }
  }
  .xb {
    display: flex;
    margin-top: 15px;
    padding-left: 10px;
    .woman {
      color: #0000ff;
      font-size: 16px;
    }
    .man {
      color: #0000ff;

      font-size: 16px;
      margin: 0px 20px;
    }
  }
}
</style>


